<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-10-21 15:32:08
 * @LastEditors: charles
 * @LastEditTime: 2021-10-25 22:36:11
-->
<template>
  <div class="home">
    <!-- 内容 -->
    <div class="content">
      <router-view></router-view>
    </div>
    <!-- 菜单 -->
    <div class="menu">
      <van-tabbar route @change="tabChangeHandler" :active="title">
        <van-tabbar-item name="首页" to="/home/index" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item name="订单" to="/home/orders" icon="todo-list-o">订单</van-tabbar-item>
        <van-tabbar-item name="我的" to="/home/me" icon="user-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import {ref,onMounted} from 'vue';
import {useRouter} from 'vue-router'
export default {
  setup() {
    let title = ref('首页')
    let router = useRouter()

    let tabChangeHandler = (tab)=>{
      title.value = tab;
    }

    return {
      title,
      tabChangeHandler
    }
  },
}
</script>
<style lang="scss" scoped>
.home {
  position: absolute;
  top:0;bottom:0;
  width:100%;
  flex-direction: column;
  display: flex;
  .content {
    flex:1;
    background: #efefef;
    overflow-y: scroll;
  }
 
}
</style>